<template>
    <div v-show="show">
        <!-- <div class="Dialog" v-show="data[0]"> -->
        <div class="DialogLogin"  >
            <div class="chaBox">
                <div class="back" @click="back()">
                    <span class="iconfont">&#xe65c;</span>
                    <span>返回登陆</span>
                </div>
                 <span class="iconfont cha" @click="cha()" >&#xe61a;</span>
            </div>
           


                    <!-- 其他登陆页面 -->
        <div class="otherLogin">
          
            <div class="main">
                <div class="bg"></div>
                <ul class="inputBox">
                    <li class="cow-one">
                        <div class="phone">
                            <span class="iconfont number">&#xe8b9;</span>
                        <!-- <form action="" method="post">
                            <select value="" class="country">
                                <option value="+86"><img src="../../public/homeImg/china.jpg" alt=""> <span>中国</span><span>+86</span></option>
                                <option value="+87"  selected><img src="../../public/homeImg/usk.jpg" alt=""> <span>美国</span><span>+87</span></option>
                                <option><img src="../../public/homeImg/britain.jpg" alt=""> 日本</option>
                                <option><img src="../../public/homeImg/britain.jpg" alt=""> 韩国</option>
                            </select>
                        </form> -->
                            <div class="select" @click.stop="isshowSlects()">
                                <span>
                                    +86
                                </span>
                                <span class="iconfont">
                                   &#xe644;
                                </span>
                                
                            </div>
                        </div>
                        <input type="text" placeholder="请输入手机号">
                        <ul class="select-gj" v-show="isshowSlect"  ref="selectGj">
                                    <li>
                                        <img src="../../public/homeImg/usk.jpg" alt="">
                                        <span>美国</span>
                                        <span class="code">+44</span>
                                    </li>
                                    <li>
                                        <img src="../../public/homeImg/china.jpg" alt="">
                                        <span>中国</span>
                                        <span class="code">+86</span>
                                    </li>
                                    <li>
                                        <img src="../../public/homeImg/britain.jpg" alt="">
                                        <span>英国</span>
                                        <span class="code">+44</span>
                                    </li>
                                     <li>
                                        <img src="../../public/homeImg/usk.jpg" alt="">
                                        <span>美国</span>
                                        <span class="code">+44</span>
                                    </li>
                                    <li>
                                        <img src="../../public/homeImg/china.jpg" alt="">
                                        <span>中国</span>
                                        <span class="code">+86</span>
                                    </li>
                                    <li>
                                        <img src="../../public/homeImg/britain.jpg" alt="">
                                        <span>英国</span>
                                        <span class="code">+44</span>
                                    </li>
                                     <li>
                                        <img src="../../public/homeImg/usk.jpg" alt="">
                                        <span>美国</span>
                                        <span class="code">+44</span>
                                    </li>
                                    <li>
                                        <img src="../../public/homeImg/china.jpg" alt="">
                                        <span>中国</span>
                                        <span class="code">+86</span>
                                    </li>
                                    <li>
                                        <img src="../../public/homeImg/britain.jpg" alt="">
                                        <span>英国</span>
                                        <span class="code">+44</span>
                                    </li>
                                     <li>
                                        <img src="../../public/homeImg/usk.jpg" alt="">
                                        <span>美国</span>
                                        <span class="code">+44</span>
                                    </li>
                                    <li>
                                        <img src="../../public/homeImg/china.jpg" alt="">
                                        <span>中国</span>
                                        <span class="code">+86</span>
                                    </li>
                                    <li>
                                        <img src="../../public/homeImg/britain.jpg" alt="">
                                        <span>英国</span>
                                        <span class="code">+44</span>
                                    </li>
                                     <li>
                                        <img src="../../public/homeImg/usk.jpg" alt="">
                                        <span>美国</span>
                                        <span class="code">+44</span>
                                    </li>
                                    <li>
                                        <img src="../../public/homeImg/china.jpg" alt="">
                                        <span>中国</span>
                                        <span class="code">+86</span>
                                    </li>
                                    <li>
                                        <img src="../../public/homeImg/britain.jpg" alt="">
                                        <span>英国</span>
                                        <span class="code">+44</span>
                                    </li>
                                     <li>
                                        <img src="../../public/homeImg/usk.jpg" alt="">
                                        <span>美国</span>
                                        <span class="code">+44</span>
                                    </li>
                                    <li>
                                        <img src="../../public/homeImg/china.jpg" alt="">
                                        <span>中国</span>
                                        <span class="code">+86</span>
                                    </li>
                                    <li>
                                        <img src="../../public/homeImg/britain.jpg" alt="">
                                        <span>英国</span>
                                        <span class="code">+44</span>
                                    </li>
                                </ul>
                    </li>
                    <li class="cow-two">
                        <span class="iconfont iconPassword">&#xe669;</span>
                       <form>
                         <input type="text" placeholder="设置输入密码">
                       </form>
                        <!-- <span class="res">重设密码</span> -->
                    </li>
                    <span class="other">
                        密码8-20位，至少包含字母/数组/字符两种组合
                    </span>
                    <button class="loginIn">
                        注册
                    </button>

                   
                </ul>
                
            </div>
       <ul class="registerType">
                        <li><span class="iconfont vx">&#xe6e6;</span></li>
                        <li><span class="iconfont qq">&#xe882;</span></li>
                        <li><span class="iconfont wb">&#xe666;</span></li>
                        <li><span class="iconfont yj">&#xe612;</span></li>
                    </ul>
        </div>

        </div>


    </div>
</template>
<script>
import Char from './slotChar.vue'
export default {
   data() {
    return {
         // 1 二维码页面 2登录页面 3注册页面
        isShowOtherLogin:3,
        isShowOtherLogin:false,
        isshowSlect:false,
        show:true
    }
   },
   props:{
     loginDislog:{
            typeof:Object || Array,
            default:_=>{
                return{}
            }
        },
   },
   watch:{

   },
   components:{Char},
   mounted() {
     document.addEventListener('click',(e)=>{
               if(this.$refs.selectGj && this.isshowSlect){
         let isSelf = this.$refs.selectGj.contains(e.target)
         if(!isSelf){
          this.isshowSlect = false
           
           }
       }
     })
   },
   
   methods:{
      cha(){
        this.isSlotLogin=!this.isSlotLogin
        this.$bus.$emit('isSlotLogin',false)
    },
    back(){
        this.$emit('isShowRegister',2)
    },
    isshowSlects(){
        this.isshowSlect = !this.isshowSlect;

    },
    otherLogin(){
        this.isShowOtherLogin = false
    }
   }
   
}
</script>
<style lang="less" scoped>
    .iconfont {
  font-family: "iconfont" !important;
  font-size: 14px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/font-icon4/iconfont.ttf?t=1659187482449') format('truetype');
}
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/font-icon5/iconfont.ttf?t=1661434789747') format('truetype');
}
    div,span,ul,li,img{
    font-size: 0;
}
.DialogLogin{
    z-index: 999;
    box-shadow: 0px 0px 7px rgb(0 0 0 / 9%);
   overflow: hidden;
    background: white;
    // border-radius: 20px;
    width: 440px;
    height: 660px;
   
    text-align: center;
   position:fixed;
   top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
      .chaBox::after{
         content:".";
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
    }
       .chaBox{

    .back{
        float: left;
        display: inline-block;
        margin: 20px;
         span{
            font-size: 16px;
         color: #666666;
         }
        
    }
     .cha{
         float: right;
         display: inline-block;
        font-size: 21px;
        color: #9F9F9F;
      margin-right: 20px;
        margin-top: 20px;
        // margin: 18px 18px 0 0;
    }
    .cha:hover{
        color: #9F9F9F;
    }
    }
    span{

        cursor: pointer;
          text-align: right;
        margin: 6px 0;
    }
 
   
    
.scanning{
   .zf-box{
    margin-top: 50px;
     .title{
    font-size: 34px;
    color: #333333;
  }
    //   .CodesCanning:hover{
//     position: relative;
//      li:first-child{
//         display: block;
//          width: 180px !important;
//         height: 350px !important;
//            animation: ball 2s;
//     }
//     .code-box{
//            animation: ball2 2s;
//     .QRcode{
//             width: 160px !important;
//             height: 160px !important; 
          
//     transition: width 2s, height 2s;

//         }
//     }
//     p{
//         width: 165px !important;
//     }

    // }
   .CodesCanning{
    height: 300px;
        display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
        @keyframes ball {
    0% { left: 130px;}
    // 25% { top: 0px; left: 97.5px;}
    // 50% { top: 0px; left: 65px;}
    // 75% { top: 0px; left: 33px;}
    100% { left: 0px;} 
  }

    li:first-child{
        display: none;
        position: absolute;
         top: 50%;
        left: 50%;
        transform: translate(-50%,-50%) !important;
    
        img{
            width: 170px;
            height: 275px;
        }
    }
   
   @keyframes ball2 {
    0% {left: 50%; }
    // 25% { top: 0px; left: 97.5px;}
    // 50% { top: 0px; left: 65px;}
    // 75% { top: 0px; left: 33px;}
    100% { left: 70%;  } 
  }

    .code-box{
      
         position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%,-50%) !important;
        .QRcode{
            height: 215px;
            width: 215px;
            background: url('../../public/homeImg/code.png') no-repeat;
            background-size: cover;
            margin: 38px auto auto auto;
            // animation: ball3 2s;
            position: relative;
            .overTime{
                display: none;
                content: "";
                position: relative;
                height: 215px;
                width: 215px;
                border-radius: 5px;
                background-color: rgba(0, 0, 0, .7);
                z-index: 2;
                .content{
                    

                span{
                    font-size: 14px;
                    color: white;
                    display: block;
                    text-align: center;
                }
                .btn{
                    font-size: 17px;
                    color: white;
                    padding: 10px 15px;
                    border-radius: 5px;
                    background: #0C73C2;
                    width: fit-content;
                    margin: 0 auto;
                }
                }
            }
        }
        p{
             width: 255px;
             margin-top: 20px;
        }
        span{
            font-size: 18px;
            color: #0C73C2;
        }
    }
   }
   }

   }
   .zf-box:after { clear:both;content:'';display:block;width:0;height:0;visibility:hidden; }
   .zf-button{
    float: right;
    outline: none;
    font-size: 15px;
    background: #EC4141;
    border: none;
    padding: 10px 38px;
    color: white;
    border-radius: 17px;
    letter-spacing: 4px;
    margin-top: 38px;
    
   }
   .bottomOther{
     margin-top: 50px;
    span{
         font-size: 14px;
         color: #666666;
    }
   }
   .otherLogin{
 
    .main{
        width: 80%;
        margin: 0 auto;
        // border: 1px solid rebeccapurple;
        .bg{
            height: 160px;
            display: flex;
            background:url('../../public/homeImg/logo.png') no-repeat 100%;
            background-position: 50%;
            
        }
        .inputBox{
            // border: 1px solid #0C73C2;
            height: 325px;
            box-sizing: border-box;
            width: 100%;
            overflow: hidden;
            .cow-one{
                   display: flex;
               position: relative;
                .phone{
                     .number{
                      font-size: 20px;
                color: #666666;
                }
                    width: 38%;
                     height: 50px;
                    border-right: 1px solid #EAEAEA;
                     display: flex;
                     align-items: center;
                     justify-content: center;
                }
                .select{
                    span{
                        font-size: 14px;
                         color: #666666;
                    }
                
                }
                form{
                    margin-left: 12px;
                    select{
                        border: none;
                         /*清除select聚焦时候的边框颜色*/
            outline: none;

            /*隐藏select的下拉图标*/
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            img{
                height: 25px;
                width: 25px;
            }
                    }

        /*使用伪类给select添加自己想用的图标*/
        .country {
            width: 90px;
                height: 40px;
                border: 1px solid #B2B2B2;
                border-radius: 6px;
                appearance:none;  
                -moz-appearance:none;  
                -webkit-appearance:none;  
                background: url("../../public/imgIcon/xiangxia.png") no-repeat 65px center;  
                background-size:18%;
        }

                }
                border: 1px solid #D9D9D9;
            input{
                 margin-left: 12px;
                background:none;outline:none;border:none;
            }
                .select-gj::-webkit-scrollbar{
                    width: 4px;
                }
                .select-gj::-webkit-scrollbar-thumb{
                    border-radius: 10px;
          box-shadow: inset 0 0 5px #e1e1e1;
    background: rgba(0, 0, 0, 0.2);
                }
                .select-gj{
                    background:#FFFFFF ;
                    width: 100%;
                    z-index: 99;
                   height: 270px;
                   overflow-y: scroll;
                    position: absolute;
                     top: 51px;
                        span{
                            font-size: 14px;
                            color: #333333;
                              margin-left: 15px;
                        }
                        
                        img{
                            height: 15px;
                            width: 21px;
                            margin-left: 15px;
                        }
                    
                    li{
                         height: 31px;
                         display: flex;
                         align-items: center;
                         .code{
                            float: right;
                            margin-left: auto;
                            margin-right: 5px;
                         }
                    }
                    li:hover{
                        background: #E4E5E7;
                    }
                    }
            }
            .cow-two{
                display: flex;
    align-items: center;
                height: 50px;
                 border-left: 1px solid #D1D1D1;
                  border-right: 1px solid #D1D1D1;
                   border-bottom: 1px solid #D1D1D1;
                // border: 1px solid #0C73C2;
               
                span{
                        font-size: 14px;
                         color: #A9A9A9;
                    }
                    .res{
                        margin-left: auto;
                        margin-right: 12px;
                    }
                    .iconPassword{
                         font-size: 24px;
                         color: #666666;
                         margin-left: 30px;
                    }
                    input{
                            margin-left: 12px;
    background: none;
    outline: none;
    border: none;

                    }
            }
             .other{
                 margin-top: 10px;
                    font-size: 14px;
                    color: #9F9F9F;
                    display: table;
                }
            .cow-three{
                                display: flex;
    align-items: center;
                height: 50px;
                // border: 1px solid #0C73C2;
                span{
                    font-size: 14px;
                         color: #666666 !important;
                          margin-left: 12px;
                }
                 			input[type=checkbox] {
                    // position: absolute;
                    // top: 5px;
                    // left: 10px;
                    width: 18px;
                    height: 18px;
                    cursor: pointer;
                    position: relative;
                    font-size: 14px;
                    // border: 2px solid #007acc;
                    // -webkit-appearance:none;
                }
         
        
            .otherPassword{
                display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: 12px;
                 span{
                    font-size: 14px;
                         color: #507DAF !important;
                 }
            }
            }
    
             .loginIn:hover{
                 background: #C72E2E;
             }
            .loginIn{
                margin-top: 17px;
                border: 0;
                border-radius: 5px;
                     display: flex;
    align-items: center;
    justify-content: center;
                height: 50px;
                width: 100%;
                  font-size: 18px;
                color: #fff;
                background: #EA4848;
            }
            .register{
                    display: flex;
    align-items: center;
    justify-content: center;
                height: 50px;
                width: 100%;
                font-size: 18px;
                color: #333333 !important;
                cursor: pointer;
                text-decoration: underline;
                  span{
                    
                     
                }
            }
      
            
        }
        
    }
       .registerType{
        width:100%;
                display: flex;
    align-items: center;
    justify-content: center;
         margin-top: 30px ;
    li{
        margin-left: 10%;
        .vx{
            color: #67B633;
        }
        .qq{
            color: #34A0DF;
        }
        .wb{
            color: #EA4A4A;
        }
        .yj{
            color: #DE7069;
        }
         .vx:hover{
            background: #67B633;
            color: white;
        }
        .qq:hover{
            background: #34A0DF;
            color: white;
        }
        .wb:hover{
            background: #EA4A4A;
            color: white;
        }
        .yj:hover{
            background: #DE7069;
            color: white;
        }
    }
    span{
        height: 50px;
        width: 50%;
        border-radius: 50%;
        border: 1px solid #6666;
        font-size: 30px;
        padding: 10px;
    }
  
            }
   }
}
   
</style>